<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>地址全局显示</title>
    <link rel="stylesheet" href="res/layui.css" media="all">
    <style type="text/css">
        .map-left {
            height:100vh;overflow: auto; padding: 10px;
        }
        .page {
            width: 100%; background-color: #eee;
        }
        .address-content .label {
            width: 30%;
            display: inline-block;
        }
        .address-content .text {
            width: 70%;
            display: inline-block;
        }
        .count {
            font-weight: bolder;
            color: red;
            margin-left: 5px;
            margin-right: 5px;
            font-size: 18px;
        }
    </style>
    <!--Map-->
    <style type="text/css">
        #container {
            height:100vh;
        }
    </style>
</head>
<body>

<div class="page">
    <div class="layui-row content">
        <div class="layui-col-md3 map-left">
            <div class="layui-card">
                <div class="layui-card-header">区域内共计<span class="count">{{count||0}}</span>个地址</div>
            </div>
        </div>
        <div class="layui-col-md9 map-right">
            <div id="container"></div>
        </div>
    </div>
</div>

<script src="res/layui.js"></script>
<script src="res/vue.js"></script>
<script src="../../js/lib/rest.js"></script>
<script src="./res/axios.min.js"></script>
<script src="res/jquery.js"></script>
<script src="res/layer/layer.js"></script>

<script type="text/javascript">
    Vue.prototype.$axios = axios;   // 2、在vue中使用axios
    var app = new Vue({
        el: '.map-left',
        data: {
            user: {addresslist:[]},
            mobile: '13551007059',
            addressList:[],
            markerList:[],
            prefix: '/education/admin/pages/addressMark/',

            //map
            currentIndex: 0,
            count: 0,
        },
        methods: {
            post(url, param) {
                console.log('request param:', param, this.convertObj(param))
                return this.$axios.post(url, this.convertObj(param), {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
            },
            convertObj(data) {
                var _result = [];
                for (var key in data) {
                    var value = data[key];
                    if(value) {
                        if (value.constructor == Array) {
                            value.forEach(function(_value) {
                                _result.push(key + "=" + _value);
                            });
                        } else {
                            _result.push(key + '=' + value);
                        }
                    }
                }
                return _result.join('&');
            },
            loadData() {
                let rect = document.getElementById('container').getBoundingClientRect()
                let px = rect.right - rect.left
                let py = rect.bottom - rect.top

                let a = common_map.getPixLngLat(0, 0)
                let d = common_map.getPixLngLat(px, py)

                let param = {
                    minlat: d.lat, minlng: a.lng, maxlat: a.lat, maxlng: d.lng
                }
                let that = this;
                this.post(this.prefix + 'list', param).then(function (rs) {
                    var res = rs.data;
                    if(res.code == 200) {
                        if(res.data !=null) {
                            that.addressList = res.data;
                            that.showMarkInMap()
                        }
                    }
                })
            },
            showMarkInMap() {
                this.markerList = []
                let arr = []
                for(var i=0; i<this.addressList.length; i++) {
                   let o = this.addressList[i];
                   if(o.mark) {
                       var a = common_map.createMarker(i + 1, [o.marklng, o.marklat])
                       if(o.mark == 2) {
                           let s = o.type == 'station' ? '自提物流' : '物流';
                           a.setLabel({'content': s})
                       } else {
                           if(o.type == 'station') {
                               a.setLabel({'content': '自提'})
                           }
                       }
                       arr.push(a)
                       this.markerList.push(a)
                   } else {
                       this.markerList.push('')
                   }
                }
                this.count = arr.length
                common_map.clearMap()
                common_map.addMarkers(arr)
                //common_map.setCenter()
            },
            initEvent(){
                common_map.onZoomend(this.loadData)
                common_map.onMoveend(this.loadData)
                common_map.onDragend(this.loadData)
            },
        }
    })
    window.onload = function () {
        app.initEvent()
        app.loadData()
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=effff8de239e3c06c98cd3c45694afcc"></script>
<script type="text/javascript" src="map.js"></script>
</body>